import React, {useState, useEffect} from 'react';
import {connect} from 'react-redux';
import {Form, Table, Modal,Button, Tooltip, Input} from 'antd';

import {defaultPagination, TableBtn} from "../publicComponents";
import {config} from "../../../config";
import * as moment from "moment";
import utils from "../../../utils/utils";
import PicturesWall from "../../../compoments/PictureWall";
import {PlusOutlined} from "@ant-design/icons";

const Page = () => {
    const [form] = Form.useForm();
    const [tableData, setTableData] = useState([
        {
            key: 1, remark: 'la', isable: '1', title: '',
            create_name: '张三', create_time: moment(),
        },
        {
            key: 2, remark: 'lala', isable: '0', title: '',
            create_name: '张三', create_time: moment()
        }
    ]); // 表格数据

    const [editModalVisible, setEditModalVisible] = useState(false);
    const [detailModalVisible, setDetailModalVisible] = useState(false);
    const [detail, setDetail] = useState({
        key: 1, remark: 'la', isable: '1', title: '',
        create_name: '张三', create_time: moment()
    });
    const [pagination, setPagination] = useState(Object.assign({},defaultPagination)); // 表格分页

    const columns = [
        {
            title: '序号',
            dataIndex: 'index',
            key: 'index',
            align: 'center',
            width: 90,
            render: (text, record, index) => ((pagination.pageSize * (pagination.current ? pagination.current - 1 : 0)) + index + 1)
        },
        {
            title: '操作',
            align: 'center',
            width: 180,
            render: (text, record, index) => {
                return (
                    <TableBtn
                        onClick={handleTableBtnClick}
                        btns={[
                            {id: 1, name: '详情'},
                            {id: 2, name: '修改'},
                            {id: 3, name: record.isable === '1' ? '停用' : '启用'},
                            {id: 4, name: '删除'},
                        ]}
                    />
                );
            }
        },
        {
            title: '状态',
            dataIndex: 'isable',
            align: 'center',
            width: 80,
            render: isable => {
                const text = isable === '0' ? '已停用' : '有效';
                const color = isable === '0' ? 'red' : '#000';
                return <span style={{color}}>{text}</span>;
            }
        },
        {
            title: '标题',
            dataIndex: 'title',
            width: 200,
            align: 'center',
        },
        {
            title: '内容',
            dataIndex: 'remark',
            align: 'center',
            render: entryDate => {
                return (
                    <Tooltip placement={'topLeft'} title={entryDate}>
                        {entryDate}
                    </Tooltip>
                );
            },
        },
        {
            title: '创建人',
            dataIndex: 'create_name',
            width: 120,
            align: 'center',
        },
        {
            title: '创建时间',
            dataIndex: 'create_time',
            align: 'center',
            width: 120,
            render: create_time => utils.getDate(create_time)
        },
    ];

    const handleTableBtnClick = (id) => {
        if (id === 1) { // 点击详情
            setDetailModalVisible(true);
        } else if (id === 2) { // 点击修改
            setEditModalVisible(true);
        }
    };
    
    const handleTableChange = (page) => {
        pagination.current = page.current;
        pagination.pageSize = page.pageSize;
        setPagination(pagination);
    };

    return (
        <div style={{padding: 14, background: '#fff', minHeight: 360}}>
            <label><p>基础设置 / 帮助中心</p></label>
            <Button
                onClick={() => setEditModalVisible(true)}
                style={{marginBottom: 5}} type={'primary'}>
                <PlusOutlined/>新增
            </Button>
            <Table
                dataSource={tableData}
                columns={columns}
                size='small'
                bordered
                onchange={handleTableChange}
                pagination={pagination}
            />
            <EditModal
                form={form}
                visible={editModalVisible}
                detail={detail}
                setVisible={setEditModalVisible}
            />
            <DetailModal
                form={form}
                visible={detailModalVisible}
                detail={detail}
                setVisible={setDetailModalVisible}
            />
        </div>
    );
};

const EditModal = (props) => {
    const {visible = false, setVisible, detail = {}, form} = props;
    const [fileList, setFileList] = useState([]);
    const [file, setFile] = useState([]);

    useEffect(() => {
        if (visible) {

        }
    }, [visible]);

    const handleGetPictureWall = (file, fileList) => {
        // 获取上传的图片的相关信息
        setFileList(fileList);
        setFile(file);
    };

    const onFinish = (value) => {

    };

    return (
        <Modal
            title={detail.id ? '修改' : '新增'}
            visible={visible}
            onCancel={_ => setVisible(false)}
            footer={null}
            getContainer={false}
        >
            <Form form={form} onFinish={onFinish}>
                <Form.Item name={"title"}
                           label={'标题'}
                           labelCol={{span: 3}}
                           rules={[{required: true, message: '请输入标题'}]}
                           style={{marginBottom: 15}}>
                    <Input style={{width: 150}} placeholder={'请输入标题'}/>
                </Form.Item>
                <Form.Item name={"remark"}
                           label={'详情'}
                           labelCol={{span: 3}}
                           rules={[{required: true, message: '请输入详情'}]}
                           style={{marginBottom: 15}}>
                    <Input.TextArea rows={5} placeholder={'请输入'}/>
                </Form.Item>
                <Form.Item name='price'
                           required
                           label='图片'
                           labelCol={{span: 3}}>
                    <PicturesWall
                        size={5}
                        fileList={fileList}
                        multiple={false}
                        fileUpdate={handleGetPictureWall}
                    />
                    <span style={{color:'red'}}>最多可上传5个，建议尺寸：500*250px</span>
                </Form.Item>
                <Form.Item name='buttons'
                           style={{marginTop: 10, textAlign: 'center'}}>
                    <Button
                        htmlType="submit" type={'primary'}
                    >发布</Button>
                    <Button style={{marginLeft: 15}}
                            onClick={_ => setVisible(false)}
                    >取消</Button>
                </Form.Item>
            </Form>
        </Modal>
    );
};
const DetailModal = (props) => {
    const {visible = false, setVisible, detail = {}} = props;
    const [fileList, setFileList] = useState([]);

    useEffect(() => {
        if (visible) {

        }
    }, [visible]);

    return (
        <Modal
            title={'详情'}
            visible={visible}
            onCancel={_ => setVisible(false)}
            footer={null}
        >
            <Form>
                <Form.Item
                    label={'标题'}
                    labelCol={{span: 6}}
                    style={{marginBottom: 15}}>
                    {detail.title}
                </Form.Item>
                <Form.Item
                    label={'详情'}
                    labelCol={{span: 6}}
                    style={{marginBottom: 15}}>
                    {detail.remark}
                </Form.Item>
                <Form.Item
                    label='图片'
                    labelCol={{span: 6}}
                >
                    {
                        fileList.map((item) => {
                            return (
                                <img
                                    style={{width: 50, height: 50}}
                                    key={config.serverUrl + item}
                                    src={config.serverUrl + item} alt=""/>
                            );
                        })
                    }
                </Form.Item>
                <Form.Item style={{marginTop: 10, textAlign: 'center'}}>
                    <Button
                        onClick={_ => setVisible(false)}
                    >关闭</Button>
                </Form.Item>
            </Form>
        </Modal>
    );
};
export default connect()(Page);